<!-- <script> {{{ -->
<script setup lang="ts">
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {Server} from '@/stores/ajax';
import {RouterLink, RouterView} from 'vue-router'
import {GetUserState} from '@/stores/userState';
import {useRouter, useRoute} from 'vue-router'
import MyQuill from '@/components/quillComponent.vue'
import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html';
import {Delta, QuillEditor} from '@vueup/vue-quill'
import subareaCard from '@/components/bbs/subareaCard1.vue'

import {
    ArrowLeft,
} from '@element-plus/icons-vue'
import {ServerUtils} from '@/serverUtils';
let route = useRoute()
let router = useRouter()
let subareaid = Number(route.params['subareaid'])
let user = GetUserState()
let activeName = $ref("first")
let editor = $ref<any>()
let content = $ref<Delta>(new Delta())
let maxPostWordsLength = 90000
const handlePost = async () => {
    await ruleFormRef.validate(async (valid, fields) => {
        if (valid) {
            await ServerUtils.post(editor, subarea.value.id, ruleForm.name, 5, maxPostWordsLength).then((res: any) => {
                console.log(res)
                router.push({path: `/bbs/forums/topic/${res.topicid}`})

            })
        } else {
            console.log("error submit!", fields);
        }
    });

}
const ruleFormRef = $ref<FormInstance>()
const ruleForm = reactive({
    name: '',
})
const rules = reactive<FormRules>({
    name: [
        {required: true, message: '必须输入标题', trigger: 'blur'},
        {min: 2, max: 20, message: '标题应该在2-20字之间', trigger: 'blur'},
    ],
})

let subarea = ref<any>()
let refresh = async () => {
    await ServerUtils.getSubarea(subareaid).then(res => {
        subarea.value = res
    })
}
refresh()
</script>
<!-- }}} -->

<template>
    <div class="fhs">
        <div class="fvs rhs-affix-area">
            <subareaCard :subarea="subarea">
            </subareaCard>
            <!-- <div class="rightside-block-2 card-block"> -->
            <!-- </div> -->
        </div>
        <div class="post-publish-block card-block">
            <div v-if="subarea">
                <div class="top-line fhs">
                    <el-button :icon="ArrowLeft" class="b1"
                        style="" color="#fff0"
                        @click="$router.back()">
                        返回
                    </el-button>
                    <el-breadcrumb separator="/"
                        style="font-size: 14px;">
                        <el-breadcrumb-item class="bc"
                            :to="{path: '/bbs/forums'}">分区
                        </el-breadcrumb-item>
                        <el-breadcrumb-item class="bc"
                            :to="{path: `/bbs/forums/subarea/${subarea.id}`}">
                            {{ subarea.name}}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>发布主题
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>

                <el-form ref="ruleFormRef" :model="ruleForm"
                    :rules="rules" label-width="120px"
                    label-position="top">
                    <el-form-item prop="name">
                        <template #label>
                            <label
                                class="label-topic-title">主题标题</label>
                        </template>
                        <el-input v-model="ruleForm.name"
                            placeholder="输入标题" clearable />
                    </el-form-item>
                    <div class="label1">
                        首贴
                    </div>
                    <div class="text-area">
                        <MyQuill theme="snow"
                            content-type="delta"
                            class="post-quill"
                            placeholder="输入文字"
                            :content="content"
                            @ready="(e) => {editor = e}"
                            :max-words-length="maxPostWordsLength" />
                    </div>
                    <el-button class="b-post"
                        @click="handlePost" color="#6666cc">
                        发布
                    </el-button>
                </el-form>
            </div>
        </div>
    </div>


</template>

<style scoped lang="scss">
.rhs-affix-area {
    order: 1;
    flex-basis: 200px;
    min-width: 240px;
}

.rightside-block-1 {
    background-color: white;
    padding: 16px 16px 20px;
    margin-bottom: 4px;

    .subarea-title {
        font-size: 20px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 4px;
    }

    .subarea-data {
        font-size: 14px;
        color: #999999;
        margin-bottom: 12px;

        .label1,
        .label2 {
            margin-right: 4px;
        }

        .topic-num {
            margin-right: 12px;
        }
    }

    .subarea-intro {
        font-size: 14px;
        color: #666666;
        line-height: 24px;
    }
}

.rightside-block-2 {
    background-color: white;
    /* padding: 16px 16px 20px; */

    .b1 {
        width: 100%;
        height: 54px;
    }

    .b1-inner {
        align-items: center;
        color: #666666;
        font-size: 16px;
    }

    .icon {
        width: 40px;
        margin-right: 4px;
    }
}

.post-publish-block {
    background-color: white;
    flex-grow: 1;
    margin-right: 4px;
    padding: 16px 30px 30px;
    min-width: 660px;

    .top-line {
        align-items: center;

        .b1 {
            border-width: 0;
            justify-content: start;
            color: #999;
            padding: 0;
            margin-right: 20px;
        }

        .b1:hover {
            color: #666;
            background-color: #fff0;
        }

        .b1:active {
            color: #ccc;
            background-color: #fff0;
        }

        .bc:hover {
            color: #444;
        }

    }

    .label-topic-title {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        text-align: left;
    }

    .label1 {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
    }

    .text-area {
        padding-top: 8px;
        height: 500px;
    }

    .b-post {
        margin: 10px 0 30px;
        font-size: 16px;
        min-width: 100px;
        letter-spacing: 10px;
    }

    .b-post.b-post {
        text-indent: -10px;
        direction: rtl;
    }

}

.ql-editor {}
</style>

